<template>
    <div class="task">
        <div class="task-tool" >
            <div class="taskBG" style="float:left"> 
                <div>
                    <img src="@/assets/img/布点数据.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">节点列表</span>
                    <span v-if="isAdd" style="float:right;margin-right:1.3%;height:47px;line-height:47px">
                        <el-button type="goon" icon="el-icon-plus" size="mini" style="border-color:#1890FF;color: #8AA7ED;" @click="addTaskClick">新增节点</el-button>
                    </span>
                    <span v-else style="float:right;margin-right:1.3%;height:47px;line-height:47px"> </span>
                    <span style="float:right;margin-right:1.3%;height:47px;line-height:47px">
                        <el-input size="mini" placeholder="请输入" v-model="input" class="input-with-select" style="width:272px" @keyup.enter.native="searchClick()"> 
                            <el-button size="mini" slot="append" icon="el-icon-search" @click="searchClick()"></el-button>
                        </el-input>
                    </span>
                </div>
                <hr style='border:0.1px inset #E9E9E9;'>
                <div class="list">
                    <el-table :data="tableData" :header-cell-style="{background: 'rgba(118,201,241,0.10)',color: 'rgba(0,0,0,0.65)'}" style="margin-top:20px">
                        <el-table-column prop="" label="序号" type="index" width="100" align="center"> </el-table-column>
                        <el-table-column prop="projectName" label="工程名称" align="center"> </el-table-column>
                        <el-table-column prop="spiderName" label="爬虫名称" align="center"> </el-table-column>
                        <el-table-column prop="spiderArguments" label="爬虫参数" align="center"> </el-table-column>
                        <el-table-column prop="tags" label="标签" align="center"> </el-table-column>
                        <el-table-column prop="cronMinutes" label="分钟/小时" width="100" align="center"> </el-table-column>
                        <el-table-column prop="cronHour" label="小时/天" width="100" align="center"> </el-table-column>
                        <el-table-column prop="cronDayOfWeek" label="天/周" width="100" align="center"> </el-table-column>
                        <el-table-column prop="cronDayOfMonth" label="天/月" width="100" align="center"> </el-table-column>
                        <el-table-column prop="enabled" label="启用状态" width="100" align="center"> 
                            <template slot-scope="scope">
                                <span v-if="scope.row.enabled == 1">开启</span>
                                <span v-if="scope.row.enabled == 0">关闭</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dateCreated" label="创建时间" align="center"> </el-table-column>
                        <el-table-column prop="dateModified" label="修改时间" align="center"> </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="editClick(scope.row)" type="text" size="small" :disabled="isEdit">编辑</el-button>
                                <el-button type="text" size="small" :disabled="isDel"  @click="closeClick(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class="block" style="width:100%;text-align:right;margin-top:10px">
                    <el-pagination @size-change="handleperPageChange" @current-change="handleCurrentChange" :current-page="page"
                    :page-size="perPage" layout="prev, pager, next, total, jumper"
                    :total="total"></el-pagination>
                </div>
            </div>
            <!-- 新增/编辑 节点 -->
            <el-dialog :title="operation?'新增节点':'编辑节点'" width="1200px" :visible.sync="dialogTableVisible">
                <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                    <el-form-item label="工程名称："> {{form.projectName}} </el-form-item>
                    <el-form-item label="爬虫名称：" prop="spiderName">
                        <el-select v-model="form.spiderName" placeholder="请选择爬虫名称" style="width:300px">
                            <el-option label="中国电子元器件网" value="huangye88_store"></el-option>
                            <el-option label="万联芯城" value="store_wlxmall"></el-option>
                            <el-option label="生意社" value="store_100ppi"></el-option>
                            <el-option label="中华标准件网" value="store_bzjw"></el-option>
                            <el-option label="京东" value="store_jd"></el-option>
                            <el-option label="淘宝" value="store_taobao"></el-option>
                            <el-option label="阿里巴巴" value="store_1688"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="爬虫参数：" prop="spiderArgument1">
                        <el-col :span="11"><span style="width:800px"><el-input v-model="form.spiderArgument1" placeholder="选输入搜索词"></el-input></span> </el-col>
                        <el-col :span="11">
                            <span style="margin-left:20px">
                                <el-select v-model="form.spiderArgument2" placeholder="请选择数据类型">
                                    <el-option label="元器件" value="元器件"></el-option>
                                    <el-option label="原材料" value="原材料"></el-option>
                                    <el-option label="标准件" value="标准件"></el-option>
                                </el-select>
                            </span>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="标签：" prop="tags">
                        <el-input v-model="form.tags"></el-input>
                    </el-form-item>
                    <el-form-item label="时间：">
                        <el-col :span="6">
                            <span style="color:red">* </span>
                            <el-select v-model="form.cronMinutes" clearable  placeholder="选择 分钟/小时" @change="selMinutes" @clear="clearValue">
                                <el-option v-for="item in minutes" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-select v-model="form.cronHour" clearable placeholder="选择 小时/天" @change="selHour" :disabled="hourDisabled" @clear="clearValue">
                                <el-option v-for="item in hour" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-select v-model="form.cronDayOfWeek" clearable placeholder="选择 天/周" @change="selWeek" :disabled="weekDisabled" @clear="clearValue">
                                <el-option v-for="item in week" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-select v-model="form.cronDayOfMonth" clearable placeholder="选择 天/月" @change="selMonth" :disabled="monthDisabled" @clear="clearValue">
                                <el-option v-for="item in month" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="启动状态：">
                        <el-switch v-model="form.enabled" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"> </el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-if="operation" type="primary" @click="addNode">立即新增</el-button>
                        <el-button v-else type="primary" @click="addNode">立即修改</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
     data() {
        return {
            input: '',
            isAdd: true,
            isDel: true,
            isEdit: false,
            tableData: [],
            page: 1, //当前页
            perPage: 10, //每页多少条数据
            total: 4, //总共多少条数据
            dialogTableVisible: false,
            operation: false, // true:新增, false:编辑
            // dataType: '', 
            form: {
                spiderConfId: '',
                projectName: 'kysj_spider',
                spiderName: '',
                spiderArguments: '',
                spiderArgument1: '', // 爬虫参数》数据类型
                spiderArgument2: '', // 爬虫参数》搜索词
                tags: '',
                cronMinutes: '',
                cronHour: '',
                cronDayOfWeek: '',
                cronDayOfMonth: '',
                enabled: '1',
                dateCreated: '',
                dateModified: '',
            },
            minutes:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
                      31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59],
            hour:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
            week:[1,2,3,4,5,6,7],
            month:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],
            rules: { 
                spiderName: [
                    { required: true, message: '请选择爬虫名称', trigger: 'change' }
                ],
                spiderArgument1: [
                    { required: true, message: '爬虫参数不能为空', trigger: 'change' }
                ],
                tags: [
                    { required: true, message: '请填写标签', trigger: 'blur' }
                ],
                cronMinutes: [
                    { required: true, message: '请选择 分钟', trigger: 'change' }
                ],
            },
            hourDisabled: true,
            weekDisabled: true,
            monthDisabled: true,
        };
    },
    methods: {
        // 数据请求
        getData() {
            this.$api.nodeManage.nodeList(this.page, this.perPage).then(res => {
                console.log(res);
                this.tableData = res.data
                this.total = res.total
            })
            this.$api.user.findUserRight(sessionStorage.getItem('userId')).then((res) => {
                // console.log("用户权限：", res); 
                this.isAdd = this.$api.common.isArrContainStr(res.data, 'kysj:node:add')
                this.isEdit = !this.$api.common.isArrContainStr(res.data, 'kysj:node:edit')
                this.isDel = !this.$api.common.isArrContainStr(res.data, 'kysj:node:delete')
            })
        },
        // 搜索数据请求
        searchGetData() {
             this.$api.task.spiderFindByKey(this.input, this.page, this.perPage).then(res => {
                console.log(res)
                this.tableData = res.data
                this.total = res.total
            })
        },
        // 新增节点
        addTaskClick() {
            console.log('add task');
            this.form = {
                spiderConfId: '',
                projectName: 'kysj_spider',
                spiderName: '',
                spiderArguments: '',
                spiderArgument1: '',
                spiderArgument2: '',
                tags: '',
                cronMinutes: '',
                cronHour: '',
                cronDayOfWeek: '',
                cronDayOfMonth: '',
                enabled: '1',
                dateCreated: '',
                dateModified: '',
            };
            this.dialogTableVisible = true;
            this.operation = true;
            this.hourDisabled = true
            this.weekDisabled = true
            this.monthDisabled = true
            // this.form = Object.assign({}, this.form);
        },
        // 选择时间
        selMinutes() {
            if(this.form.cronMinutes.length !== 0) {
                this.hourDisabled = false
            }
        },
        selHour() {
            if(this.form.cronHour.length !== 0) {
                this.weekDisabled = false
                this.monthDisabled = false
            }
        },
        selWeek() {
            if(this.form.cronDayOfWeek.length !== 0) {
                this.monthDisabled = true
            }
        },
        selMonth() {
            if(this.form.cronDayOfMonth.length !== 0) {
                this.weekDisabled = true
            }
        },
        clearValue() {
            if(this.form.cronMinutes.length == 0) {
                this.hourDisabled = true
                this.weekDisabled = true
                this.monthDisabled = true
                this.form.cronHour = ''
                this.form.cronDayOfWeek = ''
                this.form.cronDayOfMonth = ''
            } else if(this.form.cronHour.length == 0) {
                this.weekDisabled = true
                this.monthDisabled = true
                this.form.cronDayOfWeek = ''
                this.form.cronDayOfMonth = ''
            } else {
                if(this.form.cronDayOfWeek.length == 0) {
                    this.monthDisabled = false
                }
                if(this.form.cronDayOfMonth.length == 0) {
                    this.weekDisabled = false
                }
            }
        },
        // 新增节点/编辑节点》数据请求
        addNode() {
            if(this.form.spiderName.length == 0) {
                this.$alert('爬虫名称不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
            } else if(this.form.spiderArgument1.length == 0 || this.form.spiderArgument2.length == 0) {
                this.$alert('爬虫参数不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
            } else if(this.form.tags.length == 0) {
                this.$alert('标签不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
            } else if(this.form.cronMinutes.length == 0) {
                this.$alert('时间》 分钟/小时 不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
            } else {
                let messageStr
                if (this.operation) {
                    messageStr = '确定要新增节点信息吗？'
                } else {
                    messageStr = '确定要修改节点信息吗？'
                }
                this.$confirm(messageStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form.spiderArguments = 'keyword=' + this.form.spiderArgument1+'&'+ 'data_type=' + this.form.spiderArgument2
                    if(this.operation) {
                        console.log(this.form);
                        this.$api.nodeManage.spiderManagerAdd(this.form).then(res => {
                            console.log(res)
                            if(res.code == 200) {
                                this.dialogTableVisible = false;
                                this.getData()
                            }
                        })
                    } else { 
                        console.log(this.form);
                        this.$api.nodeManage.spiderManagerModify(this.form).then(res => {
                            console.log(res)
                            if(res.code == 200) {
                                this.dialogTableVisible = false;
                                this.getData()
                            }
                        })
                    }
                }).catch(() => {});
                    
            }
        },
        // 搜索
        searchClick() {
            console.log(this.input);
            this.page = 1
            if(this.input.length == 0) {
                this.getData()
            } else {
                this.searchGetData()
            }
        },
        // 编辑节点
        editClick(row) {
            this.editCommonMethod(row)
            this.form = Object.assign({}, row);
        },
        // 删除节点
        closeClick(row) {
            console.log(row);
            this.$confirm('确定要删除这条节点信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.nodeManage.spiderManagerDeleteById(row.spiderConfId).then(res => {
                    console.log(res);
                    if(res.code == 200) {
                        this.$message({
                            message: '节点删除成功',
                            type: 'success'
                        });
                    } else {
                        let str = '节点删除失败原因为：'+res.msg
                        this.$message.error(str);
                    }
                    this.getData()
                })
            }).catch(() => {});
        },
        //改变每页多少条数据
        handleperPageChange(val) {
            console.log(val);
            this.perPage = val
            if(this.input.length == 0) {
                this.getData()
            } else {
                this.searchGetData()
            }
        },
        handleCurrentChange(val) {
            console.log(val);
            this.page = val
            if(this.input.length == 0) {
                this.getData()
            } else {
                this.searchGetData()
            }
        },
        
        // 抽取方法
        // 编辑页面数据处理
        editCommonMethod(row) {
             // 判断 分/周/月按钮是否可点击
            if(row.cronHour !== null && row.cronDayOfWeek == null && row.cronDayOfMonth == null) {
                this.hourDisabled = false
                this.weekDisabled = false
                this.monthDisabled = false
            } else {
                if(row.cronDayOfWeek !== null && row.cronDayOfMonth == null) {
                    this.hourDisabled = false
                    this.weekDisabled = false
                    this.monthDisabled = true
                } else if(row.cronDayOfWeek == null && row.cronDayOfMonth !== null) {
                    this.hourDisabled = false
                    this.weekDisabled = true
                    this.monthDisabled = false
                } else {
                    this.hourDisabled = true
                    this.weekDisabled = true
                    this.monthDisabled = true
                }
            }

            this.dialogTableVisible = true;
            this.operation = false;
            console.log(row);
            // 处理 搜索词/数据类型 数据
            if(row.spiderArgument1 == null) {
                row.spiderArgument1 = ''
            } else {
                row.spiderArgument1 = row.spiderArgument1.substring(row.spiderArgument1.lastIndexOf("=")+1,row.spiderArgument1.length);
            }
            if(row.spiderArgument2 == null) {
                row.spiderArgument2 = '';
            } else {
                row.spiderArgument2 = row.spiderArgument2.substring(row.spiderArgument2.lastIndexOf("=")+1,row.spiderArgument2.length);
            }
            // 处理 启动状态
            if(row.enabled == 1) {
                row.enabled = '1'
            } else if(row.enabled == 0) {
                row.enabled = '0'
            }
        }
    },
    created:function () {
        this.$emit('header', true);
    },
    mounted(){
        this.getData()
    },
}
</script>

<style lang="less" scoped>
.task {
    height: 930px;
    background-color: #F1F9FD;

    .task-tool {
        height: 850px;
        width: 98%;
        margin: 0 auto;
        // background-color: #ffffff;

        .taskBG {
            border-radius: 2px;
            margin-top: 20px;
            width: 100%;
            height: 830px;
            background-color: #ffffff;

            .list {
                // margin-top: 20px;
                width: 98%;
                margin: 0 auto;
                // background: #ebecec;
            }
        }
    }
}

</style>